<template>
	<bm-overlay v-if="type==0" ref="customOverlay" :class="{sample: true, active}" pane="labelPane" @draw="draw">
		<div class="divtext" v-text="text" @click="handleClick(id,0,city)"></div>
	</bm-overlay>
	<bm-overlay v-else-if="type==1" ref="customOverlay" :class="{samples: true, active}" pane="labelPane" @draw="draw">
		<el-image @click="handleClick(id,1,city)" v-if="soc==0" :src="require('@/assets/icons/img/h.png')" style="margin-top:3px;margin-right:0.3rem;width: 25px;text-shadow:0 0 10px rgba(0, 0, 0, 0.5)"></el-image>
		<el-image @click="handleClick(id,1,city)" v-else-if="soc==1"  :src="require('@/assets/icons/img/b.png')"  style="margin-top:3px;margin-right:0.3rem;width: 25px;text-shadow:0 0 10px rgba(0, 0, 0, 0.5)"></el-image>
		<el-image @click="handleClick(id,1,city)" v-else-if="soc==2"  :src="require('@/assets/icons/img/g.png')"  style="margin-top:3px;margin-right:0.3rem;width: 25px;text-shadow:0 0 10px rgba(0, 0, 0, 0.5)"></el-image>
		<el-image @click="handleClick(id,1,city)" v-else   :src="require('@/assets/icons/img/r.png')" style="margin-top:3px;margin-right:0.3rem;width: 25px;text-shadow:0 0 10px rgba(0, 0, 0, 0.5)"></el-image>
		<div v-if="active" v-text="text" @click="handleClick(id,1,city)"></div>
	</bm-overlay>
	
	<bm-overlay v-else-if="type==2" ref="customOverlay" :class="{sampless: true, active}" pane="labelPane" @draw="draw">
		<svg-icon icon-class="充电桩" @click="handleClick(id,2,city)" style="font-size: 60px;text-shadow:0 0 10px rgba(0, 0, 0, 0.5)"></svg-icon>
		<div v-if="active" v-text="text" @click="handleClick(id,2,city)"></div>
		<!-- <label class="batlist">10</label> -->
	</bm-overlay>
	<bm-overlay v-else ref="customOverlay" :class="{samples: true, active}" pane="labelPane" @draw="draw">
		<svg-icon icon-class="电动车租赁" style="margin-top:3px;margin-right:0.3rem;font-size: 25px;text-shadow:0 0 10px rgba(0, 0, 0, 0.5)"></svg-icon>
		<div v-if="active" v-text="text" @click="handleClick(id,3,city)"></div>
	</bm-overlay>
</template>

<script>
	import logoImg from '@/assets/icons/img/b.png'
	export default {
		props: ['text', 'position', 'active', 'type','soc', 'id','city'],
		watch: {
			position: {
				handler() {
					this.$refs.customOverlay.reload()
				},
				deep: true
			}
		},
		methods: {
			handleClick(e, ind,city) {
				let jsonst = {
					id: e,
					city:city,
					ind: ind
				}
				this.$emit('handleClicks', jsonst);
			},
			draw({
				el,
				BMap,
				map
			}) {
				const {
					lng,
					lat
				} = this.position
				const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
				el.style.left = pixel.x - 2 + 'px'
				el.style.top = pixel.y - 3 + 'px'
			}
		}
	}
</script>

<style>
	.sample {
		width: 79px;
		height: 34px;
		line-height: 0px;
		white-space: pre;
		background: url(../../../../assets/images/province.png) no-repeat 0 0;
		background-size: contain;
		overflow: hidden;
		color: #fff;
		text-align: left;
		padding: 25px 10px;
		cursor: pointer;
		position: absolute;
		margin-top: -30px;
		margin-left: 5px;
	}

	.divtext {
		width: 79px;
		height: 34px;
		position: absolute;
		left: 0;
		top: 0;
		font-size: x-small;
		line-height: 22px;
		padding-left: 0.3rem;
	}

	.sample.active {
		background: url(../../../../assets/images/city.png) no-repeat 0 0;
		background-size: contain;
		color: #fff;
	}

	.samples {
		line-height: 20px;
		cursor: pointer;
		//background: rgba(255, 170, 127, 0.5);
		//-webkit-box-shadow: 0 0 5px #000;
		//box-shadow: 0 0 5px #000;
		color: #fff;
		text-align: left;
		padding: 2px 5px;
		position: absolute;
		display: inline;
		white-space: pre;
		border-radius: 4px;
		display: inline-flex;
		font-size: smaller;
	}

	.samples.active {
		background: rgba(0, 170, 0, 0.7);
		color: #fff;
		line-height: 31px;
	}
	
	.sampless {
		cursor: pointer;
		color: #fff;
		text-align: left;
		padding: 2px 5px;
		position: absolute;
		display: inline;
		white-space: pre;
		border-radius: 4px;
		display: inline-flex;
		font-size: smaller;
		margin-top:-30px;
		margin-left: -20px;
	}
	
	.sampless.active {
		background: rgb(107 194 252 / 70%);
		box-shadow: 0 0 10px !important;
		color: #fff;
		line-height: 60px;
	}
	.batlist {
	    background: blue;
	    width: 1.3rem;
	    height: 1.3rem;
	    line-height: 1.3rem;
	    text-align: center;
	    border-radius: 50%;
	    margin-left: 5px;
	    margin-top: -20px;
	    position: absolute;
	}
</style>
